import { Picker, View } from "@tarojs/components";
import { Paragraph, SelectionContainer } from "@/components";
import { useEffect, useMemo, useState } from "react";
import { convertTimeToAmPm } from "@/utils";
import { useUserInfo } from "@/store/userDataContext";
import { DateShape, TimeShape } from "@/data/shared/timeTypes";
import style from "./index.module.scss";
import { colors } from "@/data/shared/colors";

export type ExhibitionEventReferenceShape = {
  schedulingId: number;
  schedulingDate: DateShape;
  schedulingStartTime: TimeShape;
  schedulingEndTime: TimeShape;
  remainingSeatCount: number;
  price: number;
};

interface PickerGroupProps {
  eventData: ExhibitionEventReferenceShape[];
}

export const C38ExhibitionPickerGroup = ({ eventData }: PickerGroupProps) => {
  const { userInfoState, dispatchUserDataAction } = useUserInfo();
  // Assuming data comes in sorted
  const firstDate = eventData[0].schedulingDate;
  const [selectedDate, setSelectedDate] = useState(firstDate);

  const [selectedIndex, setSelectedIndex] = useState(0);

  const primaryOptionsExtended = useMemo(
    () => [...new Set(eventData.map((item) => item.schedulingDate))],
    [eventData]
  );

  const filteredData = useMemo(() => {
    return (
      eventData.filter((occation) => {
        return selectedDate === occation.schedulingDate;
      }) ?? []
    );
  }, [eventData, selectedDate]);

  // Initial and future setting of global state
  useEffect(() => {
    dispatchUserDataAction({
      type: "EXHIBITION_EVENT_SELECT",
      data: filteredData[selectedIndex],
    });
  }, [selectedIndex, filteredData, dispatchUserDataAction]);

  const onDateChange = (e) => {
    setSelectedIndex(0);
    setSelectedDate(primaryOptionsExtended[e.detail.value]);
  };

  const onFilteredChange = (e) => {
    setSelectedIndex(e.detail.value);
  };

  const displayEventData = userInfoState.selectedEventData;

  return (
    <View className={`${style["picker-element-wrapper"]}`}>
      {displayEventData && (
        <>
          <Picker
            className={style["picker-element"]}
            mode="selector"
            range={primaryOptionsExtended}
            onChange={onDateChange}
          >
            <SelectionContainer>
              <Paragraph size="small" color={colors.colorDark} noSpacing>
                {selectedDate}
              </Paragraph>
            </SelectionContainer>
          </Picker>

          <Picker
            className={style["picker-element"]}
            mode="selector"
            range={filteredData.map((event) => {
              return `${convertTimeToAmPm(
                event.schedulingStartTime
              )} - ${convertTimeToAmPm(event.schedulingEndTime)}`;
            })}
            onChange={onFilteredChange}
          >
            <SelectionContainer>
              <Paragraph size="small" color={colors.colorDark} noSpacing>
                {`${convertTimeToAmPm(
                  displayEventData.schedulingStartTime
                )} - ${convertTimeToAmPm(displayEventData.schedulingEndTime)}`}
              </Paragraph>
            </SelectionContainer>
          </Picker>
        </>
      )}
    </View>
  );
};
